import React from 'react'
import Loadable from 'react-loadable'
// import '../App.css'

const MyLoadingComponent = ({ isLoading, error }) => {
  // Handle the loading state
  if (!isLoading) {
    return <div className="Myloading">Loading...</div>
  } else if (error) {
    return (
      <div className="Myloading">
        Sorry, there was a problem loading the page.
      </div>
    )
  } else {
    return null
  }
}
const TakeExam = Loadable({
  loader: () => import('../pages/TakeExam.jsx'),
  loading: MyLoadingComponent,
})
const MyPractice = Loadable({
  loader: () => import('../pages/MyPractice.jsx'),
  loading: MyLoadingComponent,
})
// const Risk = Loadable({
//   loader: () => import('../pages/Risk/index.jsx'),
//   loading: MyLoadingComponent,
// })
// const Expert = Loadable({
//   loader: () => import('../pages/Expert/index.jsx'),
//   loading: MyLoadingComponent,
// })

const routers = [
  {
    path: '/TmfsExam/MyPractice/TakeExam',
    component: TakeExam,
    key: 2,
  },
  {
    path: '/TmfsExam/MyPractice',
    component: MyPractice,
    key: 1,
  },
  
]

export default routers
